<template>
	<view class="wrap flex column align-center just-between">
		<view class="wrap-content flex column align-center">
			<picker mode="selector" :range="list" range-key="title" @change="onRouteChange">
				<view class="route-bg flex align-center just-between">
					<view class="left f-30">提现到</view>

					<view class="right flex align-center just-end">
						<image class="icon" :src="$staticImagePath(list[route].icon)" />

						<view class="f-30">{{ list[route].title }}</view>
					</view>
				</view>
			</picker>

			<view class="white-bg bank-info flex align-center just-between" v-if="route === 0" @click="onChooseBank">
				<block v-if="bankData">
					<image class="bank-icon" :src="$staticImagePath(`bank/${bankData.bankCode}.png`)" />

					<view class="info flex column">
						<view class="f-30">{{ bankData.bankName }}</view>

						<view class="f-28">
							尾号 {{ $filters.getBankCardNumber(bankData.cardCode) }}
							{{ $filters.getBankType(bankData.cardType) }}
						</view>
					</view>
				</block>

				<block v-else>
					<view class="info f-30">请选择银行卡</view>
				</block>

				<image class="arrow" :src="$staticImagePath('publish/publish_arrow.png')" />
			</view>

			<view class="white-bg">
				<view class="title f-28">提现金额</view>

				<view class="input-bg flex align-center">
					<view class="f-60">¥</view>

					<input class="input f-60" maxlength="8" type="digit" v-model="money" @blur="onEndInput" />
				</view>
				
				<view class="free f-26" v-if="walletType == 2 && sales_free !== '' && money !== ''">
					对应提现金额(元):{{ parseFloat(money * (1 - sales_free)).toFixed(2) }} 折扣率:{{ (1 - sales_free).toFixed(2) }}
				</view>

				<view class="free f-26" v-else-if="walletType != 2">
					对应提现金额(元):{{ parseFloat(money * (1 - free)).toFixed(2) }} 折扣率:{{ (1 - free).toFixed(2) }}
				</view>
			</view>

			<view class="white-bg">
				<view class="title fBold f-32">付款钱包</view>

				<view class="wallet-bg flex align-center just-between">
					<view class="wallet-info flex align-center">
						<view class="choose">
							<image :src="$staticImagePath('common/choose_select.png')" />
						</view>

						<view class="balance f-30">{{ balanceTitle }}：{{ balance }}</view>
					</view>

					<view class="all f-26" @click="onAllWithdraw">全部提现</view>
				</view>
			</view>
		</view>

		<view class="wrap-bottom-btn-bg flex column align-center">
			<view class="theme-gradient-btn f-34" @click="onSureWithdraw">确认提现</view>

			<view class="wrap-mini-btn flex align-center" @click="onWithdrawRecords">
				<view class="f-28">提现记录</view>

				<image class="arrow" :src="$staticImagePath('publish/arrow_right.png')" />
			</view>
		</view>
	</view>
</template>

<script>
	import { getBankAndBalance, submitWithdraw, salesWithdrawal } from "@/API/wallet.js";
	export default {
		data() {
			return {
				walletType: "", // 钱包类型 1=红包钱包,2=销售钱包,3=分佣钱包
				route: 0, //提现路径 0:微信零钱 1:银行卡

				account_id: "", //提现银行卡id
				money: "", //提现金额
				balanceTitle: "", //余额标题
				balance: "", //余额
				free: "0.00", //手续费
				sales_free: "", //

				list: [
					{
						title: "银行卡",
						route: 0,
						icon: "wallet/withdraw_bank.png",
					},
					{
						title: "微信零钱",
						route: 1,
						icon: "wallet/withdraw_wx.png",
					},
				],

				bankData: null, //银行卡信息
			};
		},
		onLoad(options) {
			this.walletType = options.type;

			if (this.walletType === "1") {
				this.route = 1;
			} else {
				this.route = 0;
			}
			this.getWalletBalanceData();
		},
		methods: {
			/**
			 * 选择提现位置
			 */
			onRouteChange(e) {
				this.route = parseInt(e.detail.value);
			},
			/**
			 * 选择银行卡
			 */
			onChooseBank() {
				this.$jump.to("/pages/user/bank/bank?choice=1");
			},
			/**
			 * 全部提现
			 */
			onAllWithdraw() {
				this.money = this.balance;
				this.onEndInput()
			},
			/**
			 * 结束输出
			 */
			onEndInput() {
				if (this.walletType != 2) {
					return;
				}
				if (this.money === "") {
					return;
				}
				salesWithdrawal(this.money).then(res => {
					this.sales_free = res.data.discount_rate;
				})
			},
			/**
			 * 确认提现
			 */
			onSureWithdraw() {
				if (this.money === "") {
					this.$st.show("请输入提现金额");
					return;
				}
				if (parseFloat(this.money) > parseFloat(this.balance)) {
					this.$st.show(`提现金额不能超过${this.balance}元`);
					return;
				}
				
				this.$throttle(() => {
					submitWithdraw({
						money: this.money,
						account_id: this.route === 0 ? this.bankData.id : "",
						wallet_type: this.walletType,
						withdraw_type: this.route,
					}).then((res) => {
						this.$st.success("提现成功", () => {
							this.$jump.paySuccess("withdraw");
						});
					})
				})
			},
			/**
			 * 提现记录
			 */
			onWithdrawRecords() {
				this.$jump.to(`/pages/mine/wallet/withdrawRecords?index=${parseInt(this.walletType) - 1}`);
			},

			/**
			 * 获取钱包
			 */
			getWalletBalanceData() {
				getBankAndBalance().then((res) => {
					if (this.walletType === "1") {
						this.balanceTitle = "红包钱包";
						this.balance = res.data.bribe;
						this.free = res.data.bribeservicefee;
					} else if (this.walletType === "2") {
						this.balanceTitle = "销售钱包";
						this.balance = res.data.money;
						this.free = "0";
					} else if (this.walletType === "3") {
						this.balanceTitle = "分佣钱包";
						this.balance = res.data.commission;
						this.free = res.data.commissionservicefee;
					}
					this.bankData = res.data.bank;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 25rpx;
		padding-bottom: 140rpx;
		height: 100vh;
		box-sizing: border-box;

		.wrap-content {
			width: 100%;
			overflow: hidden;
			gap: 20rpx;

			.route-bg {
				width: 700rpx;
				overflow: hidden;
				color: #121516;

				.left {
					margin-left: 50rpx;
				}

				.right {
					margin-left: 20rpx;
					margin-right: 30rpx;
					flex: 1;
					overflow: hidden;
					gap: 10rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.white-bg {
				width: 100%;
				overflow: hidden;
				background-color: white;
				border-radius: 16rpx;
				padding: 35rpx 30rpx;
				box-sizing: border-box;

				.title {
					color: #333333;
				}

				.input-bg {
					margin-top: 20rpx;
					padding: 20rpx 0rpx;
					width: 100%;
					overflow: hidden;
					box-sizing: border-box;
					color: #121516;
					gap: 15rpx;
					border-bottom: 2rpx solid #f4f4f4;

					.input {
						flex: 1;
						overflow: hidden;
						min-height: 60rpx;
					}
				}

				.free {
					margin-top: 35rpx;
					width: 100%;
					overflow: hidden;
					color: #666666;
				}

				.wallet-bg {
					margin-top: 40rpx;
					width: 100%;
					overflow: hidden;
					gap: 20rpx;

					.wallet-info {
						flex: 1;
						overflow: hidden;
						gap: 17rpx;

						.choose {
							width: 40rpx;
							height: 40rpx;

							> image {
								width: 100%;
								height: 100%;
							}
						}
						.balance {
							color: #333333;
						}
					}

					.all {
						color: #eb5c20;
					}
				}
			}

			.bank-info {
				width: 100%;
				overflow: hidden;
				gap: 20rpx;

				.bank-icon {
					width: 100rpx;
					height: 100rpx;
				}

				.info {
					flex: 1;
					overflow: hidden;
					gap: 10rpx;
					color: #121516;
				}

				.arrow {
					width: 12rpx;
					height: 20rpx;
				}
			}
		}
	}
</style>
